<template>
  <tab-table
    :fields="fieldList"
    :data="dataList"
    class="table-list"
    @list="getDataList"
    @row-click="handleTableRowClick" />
</template>

<script>
import TabTable from '../../components/DetailTab/TabTable'

export default {
  name: 'TabPurchaseList',
  components: {
    TabTable
  },
  data() {
    return {
      dataList: [
        { field1: '***公司', field2: '河南郑州', field3: 'IT', field4: '100~500', field5: '张三', field6: '18899998888', field7: '50', field8: '2020-02-02' },
        { field1: '***公司', field2: '河南郑州', field3: 'IT', field4: '100~500', field5: '张三', field6: '18899998888', field7: '50', field8: '2020-02-02' },
        { field1: '***公司', field2: '河南郑州', field3: 'IT', field4: '100~500', field5: '张三', field6: '18899998888', field7: '50', field8: '2020-02-02' },
        { field1: '***公司', field2: '河南郑州', field3: 'IT', field4: '100~500', field5: '张三', field6: '18899998888', field7: '50', field8: '2020-02-02' },
        { field1: '***公司', field2: '河南郑州', field3: 'IT', field4: '100~500', field5: '张三', field6: '18899998888', field7: '50', field8: '2020-02-02' },
        { field1: '***公司', field2: '河南郑州', field3: 'IT', field4: '100~500', field5: '张三', field6: '18899998888', field7: '50', field8: '2020-02-02' },
        { field1: '***公司', field2: '河南郑州', field3: 'IT', field4: '100~500', field5: '张三', field6: '18899998888', field7: '50', field8: '2020-02-02' },
        { field1: '***公司', field2: '河南郑州', field3: 'IT', field4: '100~500', field5: '张三', field6: '18899998888', field7: '50', field8: '2020-02-02' },
        { field1: '***公司', field2: '河南郑州', field3: 'IT', field4: '100~500', field5: '张三', field6: '18899998888', field7: '50', field8: '2020-02-02' },
        { field1: '***公司', field2: '河南郑州', field3: 'IT', field4: '100~500', field5: '张三', field6: '18899998888', field7: '50', field8: '2020-02-02' }
      ],
      fieldList: [
        { prop: 'field1', width: '200', label: '采购单号', canVisit: true },
        { prop: 'field2', width: '200', label: '供应商', canVisit: true },
        { prop: 'field3', width: '200', label: '采购时间' },
        { prop: 'field4', width: '200', label: '付款状态' },
        { prop: 'field5', width: '200', label: '入库仓库' }
      ]
    }
  },
  methods: {
    getDataList(data) {
      console.log('page data: ', data)
    },

    handleTableRowClick(row, field) {
      if (field === 'field1') {
        console.log('采购单号')
      } else if (field === 'field2') {
        console.log('供应商')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.table-list {
  padding: 15px;
}
</style>
